<template>
    <div class="person">
      姓:<input type="text" name="" id="" v-model="fName"> <br>
      名:<input type="text" name="" id="" v-model="lName"> <br>
      姓名: <span>{{ fullName }}</span><br>
      <button @click="handleFullName">修改全名为li-si</button>
    </div>
  </template>
  <script setup lang='ts'>
  import { ref, reactive,computed} from "vue";
  const fName = ref("张")
  const lName = ref("三")
  //这么定义的fullName是一个计算属性，切是只读的，是修改了fName和lName，从而引起全名的重新计算，然后return出去
  // const fullName = computed(()=>{
  //   return fName.value.slice(0,1).toUpperCase() + fName.value.slice(1) + lName.value.slice(0,1).toUpperCase() + lName.value.slice(1)
  // })
  // const handleFullName = ()=>{
  //   console.log(fullName.value);
  //   fullName.value='123' //提示报错 无法为“value”赋值，因为它是只读属性
  // }
  
  //这么定义的fullName是一个计算属性，可读可写
  const fullName = computed({
    //读fullName的时候调
    get(){
      return fName.value.slice(0,1).toUpperCase() + fName.value.slice(1) + lName.value.slice(0,1).toUpperCase() + lName.value.slice(1)
    },
    //改fullName的时候调
    set(val){
      console.log("set",val);
      // let x = val.split("-");
      const [f,l] = val.split('-')
      // console.log("xxx==",x);
      fName.value = f;
      lName.value = l
    }
  })
  const handleFullName = ()=>{
    console.log(fullName.value);
    fullName.value='li-si' //提示报错 无法为“value”赋值，因为它是只读属性
  }
  </script>
  <style scoped>
  .person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
  </style>